{% extends 'skeleton.html' %}

{% block head %}
<link href="/media/css/image-upload.css" type="text/css" rel="stylesheet" />
{% endblock %}

{% block body %}

{% if image %}
<div class="thumbnail">
  <img class="thumbnail" src="{{ image.get_thumbnail.get_url }}"
       width="{{ image.get_thumbnail.width }}"
       height="{{ image.get_thumbnail.height }}" />
  <div class="details">
     <a href="{{ image.get_original.get_url }}" target="_top">
       {{ image.get_original.width }} x {{ image.get_original.height }}
     </a>
  </div>
</div>
{% endif %}

{% if error %}
<div class="thumbnail">
  <img class="thumbnail" src="/media/img/broken-image-100.png"
       width="120" height="100" alt="Broken Image" />
</div>  
{% endif %}

<form action="/images/upload/" enctype="multipart/form-data" method="post" id="image-upload-form">
  <div>Upload a file:</div>
  <input id="file" type="file" name="file" />
  <img id="ajax-loader" src="/media/img/ajax-loader.gif" width="16" height="16" />
  {% if image %}
    <p><input type="submit" name="remove" value="Remove Image" /></p>
  {% endif %}
  <input id="form-result" type="hidden" value="{{ image.id }}" />
</form>

<div class="footer"></div>

<script type="text/javascript">

document.getElementById("file").onchange = function() {
  document.getElementById('ajax-loader').style.display = "inline";
  document.getElementById('image-upload-form').submit();
}

if (parent.iFrameLoaded) {
  parent.iFrameLoaded(document, window);
}

</script>

{% endblock %}